<script setup>
  import * as echarts from 'echarts';
  import { ref, onMounted } from 'vue';
  //获取DOM节点
  let charts = ref();
  //组件挂载完毕
  onMounted(() => {
    //初始化图表
    let mychart = echarts.init(charts.value);

    //模拟2023-2025年每月游客量数据
    const monthData = [
      '1月', '2月', '3月', '4月', '5月', '6月',
      '7月', '8月', '9月', '10月', '11月', '12月'
    ];

    //设置配置项
    mychart.setOption({
      title: {
        text: '',
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#333',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        data: ['2023年', '2024年', '2025年'],
        textStyle: {
          color: '#fff'
        },
        top: 0
      },
      xAxis: {
        type: 'category',
        data: monthData,
        axisLine: {
          lineStyle: {
            color: '#666'
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        name: '游客量(万人)',
        nameTextStyle: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#666'
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12,
          formatter: '{value}w'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      },
      grid: {
        left: '10%',
        top: '20%',
        right: '5%',
        bottom: '10%'
      },
      series: [
        {
          name: '2023年',
          type: 'line',
          data: [320, 332, 301, 334, 390, 330, 320, 380, 420, 410, 380, 390],
          smooth: true, // 平滑折线
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 3
          },
          itemStyle: {
            color: '#FF6B6B'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 107, 107, 0.3)'
              }, {
                offset: 1, color: 'rgba(255, 107, 107, 0.05)'
              }]
            }
          }
        },
        {
          name: '2024年',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310, 380, 420, 440, 380, 420],
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 3
          },
          itemStyle: {
            color: '#4ECDC4'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(78, 205, 196, 0.3)'
              }, {
                offset: 1, color: 'rgba(78, 205, 196, 0.05)'
              }]
            }
          }
        },
        {
          name: '2025年',
          type: 'line',
          data: [300, 300, 290, 350, 420, 480, 450, 520, 580, 550, 500, 520],
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 3
          },
          itemStyle: {
            color: '#FFD166'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 209, 102, 0.3)'
              }, {
                offset: 1, color: 'rgba(255, 209, 102, 0.05)'
              }]
            }
          }
        }
      ]
    });
  })
</script>
<template>
  <div class="box">
    <div class="top">
      <div>
        <p class="title">年度游客量对比</p>
        <img
          src="../../images/dataScreen-title.png"
          alt=""
        >
      </div>
    </div>
    <div
      class="charts"
      ref="charts"
    ></div>
  </div>
</template>



<style scoped>
  .box {
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;

  }

  .top {
    margin-left: 20px;
    height: 70px;
    display: flex;
    align-items: center;
  }

  .top .title {
    color: white;
    font-size: 20px;
  }

  .top img {
    margin-top: 10px;
  }

  .charts {
    height: calc(100% - 80px);
  }
</style>